<template>
	<div class="seting">
		<ul>
			<li class="topfrist">
				<div @click="out1" class="leftset">
					<img src="../images/smallright.png" />
				</div>
				<p>设置</p>
			</li>
			<li>
				<p>仅WLAN下试听下载</p>
				<div class="bottom_of">
					<div class="Yuan">
					</div>
				</div>
			</li>
			<li class="settingcomme">
				<p>扫描歌曲</p>
				<div class="rightset">
					<img src="../images/small.png" />
				</div>
			</li>
			<li class="settingcomme">
				<p>扫描设置</p>
				<div class="rightset">
					<img src="../images/small.png" />
				</div>
			</li>
			<li class="settingcomme">
				<p>关于nubia音乐</p>
				<div class="rightset">
					<img src="../images/small.png" />
				</div>
			</li>
			<li class="settingcomme">
				<p>退出</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name:"seting",
		data(){
			return{
				
			}
		},
        methods:{
        	out1() {
				this.$router.push("/");
			},
        },
		mounted(){
			var tols =document.querySelector(".leftset")
			var dji = document.querySelector(".bottom_of");
			console.log(dji)
			var Yuan = document.querySelector(".Yuan");
			dji.addEventListener("click",()=>{
					Yuan.style.transform ="translateX(100%)";
					dji.style.background ="#ff0";
			});
		},
		computed:{
			
		},
		components:{
		}
	}
</script>

<style scoped lang="scss">
	.gre{
		background: green;
	}
	.seting {
		width: 100%;
		height: 100%;
		ul {
			width: 100%;
			height: 100%;
			padding-top: 5%;
			li {
				list-style: none;
				width: 100%;
				height: 7.8%;
				border-bottom: 1px solid white;
				p {
					margin-left: 4%;
				}
			}
			.topfrist {
				width: 100%;
				height: 9.3%;
				position: relative;
				.leftset {
					width: 11px;
					height: 19px;
					margin-left: 4%;
					position:absolute;
					top:30%;
					left:0%;
					img {
						width: 100%;
					}
				}
				p{
					font-size: 17px;
					position: absolute;
					top: 25%;
					left: 5%;
				}
			}
			li:nth-child(2) {
				width: 100%;
				height: 9.3%;
				position: relative;
				p {
					font-size: 15px;
					position: absolute;
					top: 30%;
					left: 0%;
				}
				.bottom_of {
					width: 35px;
					height: 20px;
					border-radius: 50px;
					background: #ff4d4d;
					box-shadow: #DDDDDD;
					position: absolute;
					top: 30%;
					right: 5%;
					div {
						width: 18px;
						height: 18px;
						border-radius: 50%;
						background: white;
						box-shadow: #999998;
						margin-top: 1px;
					}
				}
			}
			.settingcomme{
				position: relative;
				p{
					position:absolute ;
					top:30%;
					left: 0;
					font-size: 15px;
				}
				.rightset{
					width: 11px;
					height: 19px;
					position: absolute;
					top: 30%;
					right: 7%;
					img{
						width: 100%;
					}
				}
			}
		}
	}
</style>